import { Button, ButtonProps } from 'antd';
import React from 'react';
import styles from './styles.module.scss';
interface StyledButtonProps {
  hasIconAndLabel?: boolean;
  horizontal?: boolean;
  current?: boolean;
}

export const StyledButton = React.forwardRef<
  HTMLButtonElement,
  StyledButtonProps & ButtonProps
>(({ hasIconAndLabel, horizontal, current, ...restProps }, ref) => (
  <Button
    ref={ref}
    className={styles['styled-button']}
    {...restProps}
    style={{
      flexDirection: horizontal ? 'row' : 'column',
      minWidth: hasIconAndLabel && !horizontal ? '48px' : '74px',
      height: hasIconAndLabel && !horizontal ? '54px' : '24px',
      backgroundColor: current ? '#E2E4E6' : '',
      gap: hasIconAndLabel && !horizontal ? '0' : '4px',
      padding: '0px 4px',
      width: 'max-content',
      justifyContent: !horizontal ? 'flex-center' : 'flex-start',
    }}
    type='default'
  />
));
